<script setup>
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { fixContentImageUrls, fixCoverImageUrl } from '@/utils/fixImageUrls'
import { getScenicSpotDetail, shoucangScenicSpot, xihuanScenicSpot } from '@/api/play'
import { useUserStore } from '@/stores/user'

onLoad(({ id }) => {
  onGetScenicSpotDetail(id)
})
const scenicSpotDetail = ref({
  id: '',
  cover: '',
  title: '',
  latitude: 0,
  longitude: 0,
  isShoucang: false,
  isXihuan: false,
})
async function onGetScenicSpotDetail(id) {
  const { result } = await getScenicSpotDetail(id)
  scenicSpotDetail.value = {
    ...result,
    cover: fixCoverImageUrl(result.cover),
    content: fixContentImageUrls(result.content),
  }
}

function onShowAddress() {
  uni.openLocation({
    latitude: +scenicSpotDetail.value.latitude,
    longitude: +scenicSpotDetail.value.longitude,
    name: scenicSpotDetail.value.title,
  })
}

const { isLogin } = storeToRefs(useUserStore())
function onChangeTabStatus(type) {
  switch (type) {
    case 'xihuan':
      if (!scenicSpotDetail.value.isXihuan)
        xihuanScenicSpot(scenicSpotDetail.value.id)
      scenicSpotDetail.value.isXihuan = !scenicSpotDetail.value.isXihuan
      break
    case 'shoucang':
      if (!isLogin.value)
        uni.switchTab({ url: '/pages/me/index' })

      if (!scenicSpotDetail.value.isShoucang)
        shoucangScenicSpot(scenicSpotDetail.value.id)
      scenicSpotDetail.value.isShoucang = !scenicSpotDetail.value.isShoucang
      break
    case 'location':
      onShowAddress()
      break
    default:
      break
  }
}

onShareAppMessage(() => {
  return {
    title: scenicSpotDetail.value.title,
    path: `/pages/play/view/scenic-spot-detail?id=${scenicSpotDetail.value.id}`,
  }
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar :title="scenicSpotDetail.title" custom-color="#000" left-show placeholder fixed />
    <main class="pt-1.5">
      <view class="px-2 m-2 bg-white rounded">
        <image class="py-2 block h-368 w-full" :src="scenicSpotDetail.cover" mode="aspectFill" />
      </view>
      <view class="px-2 m-2 bg-white rounded">
        <view class="py-3">
          <rich-text :nodes="scenicSpotDetail.content" selectable />
        </view>
      </view>
    </main>
    <TabBar>
      <view class="text-[#666] flex h-full justify-around items-center">
        <view class="center flex-col" @click="onChangeTabStatus('xihuan')">
          <view v-if="!scenicSpotDetail.isXihuan" class="i-ant-design:heart-outlined" />
          <view v-else class="i-ant-design:heart-fill text-[#FF4D00]" />
          <text class="mt-1 text-xs">
            喜欢
          </text>
        </view>
        <view class="center flex-col" @click="onChangeTabStatus('shoucang')">
          <view v-if="!scenicSpotDetail.isShoucang" class="i-ant-design:star-outlined" />
          <view v-else class="i-ant-design:star-fill text-[#FF4D00]" />
          <text class="mt-1 text-xs">
            收藏
          </text>
        </view>
        <view class="center flex-col" @click="onChangeTabStatus('location')">
          <view class="i-ion:location-outline text-[#1890FF]" />
          <text class="mt-1 text-xs">
            去这里
          </text>
        </view>
        <button class="p-0 m-0 bg-transparent text-[#666]" open-type="share">
          <view class="center flex-col">
            <view class="i-ant-design:export-outlined text-30" />
            <view class="mt-1 text-xs">
              分享
            </view>
          </view>
        </button>
      </view>
    </TabBar>
  </view>
</template>

<style scoped>
button::after {
  border: none;
}
</style>
